<template>
  <div class="recharge-status">
    <div class="recharge-status__header">
      充值进行中
    </div>
    <div class="recharge-status__brief">订单发起时间
      <span class="text-danger">{{rechargeStatus.createDate | toTime('H:mm:ss')}}</span><br/>
      您有一笔充值申请已提交，请<span class="text-danger">30</span>分钟内完成支付
    </div>
    <p class="text-danger recharge-status__tip" v-if="[consts.PAY_BANKCARD_ZHUANZ].indexOf(rechargeStatus.paymentId) !== -1">提醒您付款账户已更改，请不要保存旧账户，请检查充值，避免资金损失</p>
    <el-form label-position="top" no-spacing="">
      <div class="recharge-status__transfer"
           v-if="Number(rechargeStatus.showType) === 1">
        <el-row :gutter="20">
          <el-col>
            <el-form-item label="收款账号：">
              <el-input readonly :value="rechargeStatus.cardNo">
                <template slot="prepend">
                  <svg-icon icon-class="card-receive" class="finance-modal__svg-prepend"></svg-icon>
                </template>
                <template slot="append">
                  <el-tooltip class="item" effect="dark" trigger="click" content="复制成功！" placement="bottom-end">
                    <el-button type="text" :data-clipboard-text="rechargeStatus.cardNo" size="small"
                               class="clipboard-btn">复制
                    </el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款卡信息：">
              <el-input v-model="rechargeStatus.bankName" readonly="">
                <template slot="prepend">
                  <!--<payment-pic :payment-id="rechargeStatus.bankId"></payment-pic>-->
                  <bank-pic :bank-id="rechargeStatus.bankId"></bank-pic>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="充值金额：">
              <el-input readonly :value="rechargeStatus.amount">
                <template slot="prepend">
                  <svg-icon icon-class="wallet" class="finance-modal__svg-prepend"></svg-icon>
                </template>
                <template slot="append">
                  <el-tooltip class="item" effect="dark" trigger="click" content="复制成功！" placement="bottom-end">
                    <el-button type="text" :data-clipboard-text="rechargeStatus.amount" size="small"
                               class="clipboard-btn">复制
                    </el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户行地址：">
              <el-input readonly :value="rechargeStatus.channelName">
                <template slot="prepend">
                  <svg-icon icon-class="location" class="finance-modal__svg-prepend"></svg-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附言：" v-if="rechargeStatus.paymentId == consts.PAY_BANKCARD_ZHUANZ">
              <el-input readonly :value="postscript">
                <template slot="prepend">
                  <svg-icon icon-class="postscript" class="finance-modal__svg-prepend"></svg-icon>
                </template>
                <template slot="append">
                  <el-tooltip class="item" effect="dark" trigger="click" content="复制成功！" placement="bottom-end">
                    <el-button type="text" :data-clipboard-text="postscript" size="small" class="clipboard-btn">复制</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款账户名：">
              <el-input readonly :value="rechargeStatus.cardUsername">
                <template slot="prepend">
                  <svg-icon icon-class="user-circle" class="finance-modal__svg-prepend"></svg-icon>
                </template>
                <template slot="append">
                  <el-tooltip class="item" effect="dark" trigger="click" content="复制成功！" placement="bottom-end">
                    <el-button type="text" :data-clipboard-text="rechargeStatus.cardUsername" size="small"
                               class="clipboard-btn">复制
                    </el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!--<div class="recharge-status__alipay" v-else-if="rechargeStatus.paymentId === consts.PAY_ZHIFUBAO_ZHUANZ && rechargeStatus.channelId!=1001">-->
        <!--<div class="recharge-status__qrcode">-->
          <!--<div class="recharge-status__qrcode-inner">-->
            <!--<img class="recharge-status__qrcode-img" :src="rechargeStatus.merchantCode" />-->
          <!--</div>-->
          <!--<div class="recharge-status__qrcode-name">{{rechargeStatus.merchantName}}</div>-->
        <!--</div>-->
        <!--<el-form-item label="转账金额：">-->
          <!--<el-input readonly :value="rechargeStatus.amount">-->
            <!--<template slot="prepend">-->
              <!--<svg-icon icon-class="withdraw" class="finance-modal__svg-prepend"></svg-icon>-->
            <!--</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="附言：">-->
          <!--<el-input readonly :value="postscript">-->
            <!--<template slot="prepend">-->
              <!--<svg-icon icon-class="postscript" class="finance-modal__svg-prepend"></svg-icon>-->
            <!--</template>-->
            <!--<template slot="append">-->
              <!--<el-tooltip class="item" effect="dark" trigger="click" content="复制成功！" placement="bottom-end">-->
                <!--<el-button type="text" :data-clipboard-text="postscript" size="small" class="clipboard-btn">复制</el-button>-->
              <!--</el-tooltip>-->
            <!--</template>-->
          <!--</el-input>-->
        <!--</el-form-item>-->
      <!--</div>-->
      <template v-else>
        <el-form-item label="充值方式：">
          <el-input v-model="rechargeStatus.paymentName" readonly="">
            <template slot="prepend">
              <payment-pic :payment-id="rechargeStatus.paymentId"></payment-pic>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="充值金额：">
          <el-input v-model="rechargeStatus.amount" readonly="">
            <template slot="prepend">
              <div class="recharge-status__prepend">
                <svg-icon icon-class="wallet"></svg-icon>
              </div>
            </template>
          </el-input>
        </el-form-item>
      </template>

      <el-form-item
        v-if="[consts.PAY_ZHIFUBAO_ZHUANZ, consts.PAY_BANKCARD_ZHUANZ].indexOf(rechargeStatus.paymentId) !== -1">
        <el-warning
          class="recharge-status__warning">转账时请务必填写附言且汇款金额需与平台填写金额保持一致 否则影响到账
        </el-warning>
      </el-form-item>

      <el-form-item align="center" style="margin-top: .2rem">
        <el-button type="outline-info" @click="resetRecharge">撤销充值申请</el-button>
      </el-form-item>
    </el-form>
    <div class="recharge-status__footer">
      <div class="recharge-status__notice">注意</div>
      <div class="text-danger">如果您已完成付款，请勿撤销，我们将尽快为您处理。</div>
      <div>如果一直没有完成付款，我们会在申请存款的30分钟后自动撤销存款申请。</div>
      <div>进入“<span class="text-primary">我的-资金明细-充值记录</span>”可查看到账情况</div>
    </div>
  </div>
</template>

<script>
  import {doRechargeCancel} from '@/services/api/finance';
  import PaymentPic from "@/components/payment-pic/index";
  import ElWarning from "@/components/el-warning/index";

  export default {
    name: "recharge-status",

    components: {ElWarning, PaymentPic},

    props: ['rechargeStatus'],

    data() {
      return {
        timer: undefined,
      };
    },

    computed: {
      postscript() {
        // return this.rechargeStatus.keyword.split('||')[1] || '';
        return this.rechargeStatus.keyword || '';
      },
    },

    methods: {
      resetRecharge() {
        const {orderId} = this.rechargeStatus;
        this.$confirm('如果您已完成付款请勿撤销，否则将影响此笔存款进度请耐心等待，我们将尽快为您处理', '撤销提示', {
          confirmButtonText: '确定撤销',
          cancelButtonText: '关闭',
          type: 'warning',
          center: true
        }).then(() => {
          doRechargeCancel({orderId}).then(([result, data]) => {
            if (result) {
              this.$emit('on-cancel');
              this.$notify({
                type: 'success',
                message: '订单撤销成功!'
              });
            }else{
              this.$notify({
                type: 'error',
                message: data.message
              });
            }
          });
        }).catch(() => {
        });
      },
    },
    mounted() {
      this.timer = setInterval(() => {
        this.$emit('refresh-status');
      }, 3000);
    },

    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

<style lang="scss" scoped>
  @include b(recharge-status) {
    /*padding: 0 20px;*/
    @include e(header) {
      text-align: center;
      margin-bottom: 20px;
      font-size: 28px;
      font-weight: bold;
    }
    @include e(tip){
      text-align: center;
    }
    @include e(brief) {
      color: rgba(153, 153, 153, 1);
      text-align: center;
      line-height: 1.5;
      margin-bottom: 30px;
    }
    @include e(prepend) {
      width: 30px;
      text-align: center;
    }

    @include e(detail) {
      text-align: center;
      padding: 20px;
    }

    @include e(footer) {
      padding-top: 20px;
      line-height: 1.5;
      color: #999999;
    }
    @include e(warning) {
      margin-top: 10px;
    }
    @include e(notice) {
      color: rgba(153, 153, 153, 1);
      font-weight: bold;
    }
    @include e(qrcode) {
      text-align: center;
    }
    @include e(qrcode-inner) {
      display: inline-block;
      padding: 14px;
      margin-bottom: 22px;
      box-shadow:0px 13px 18px 0px rgba(0,0,0,0.05);
      border-radius: $--border-radius-medium;
    }
    @include e(qrcode-img) {
      width: 143px;
      height: 143px;
    }
    @include e(qrcode-name) {
      font-weight: bold;
    }
  }
</style>
